<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>职工请假</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/student_leave.css">
	<link rel="stylesheet" href="../css/main.css">
</head>

<body>
	<div id="container">
		<div class="contain">
			<div class="header">
				<div class="header_title">职工请假</div>
				<a onclick="history.back()">
					<img src="../image/return.png" alt="" class="return">
				</a>
			</div>
			<div style="height: 40px;"></div>
			<div class="leave_content" id="vue-root">
				<div class="approval" v-for="item in list" :key="item.id">
					<a :href="'leave_detail.html?id='+item.id">

						<div class="result2" :style="style(item.status)" v-text="['待审核','通过','驳回'][item.status]"></div>

						<div class="list_content">
							<p>
								<span>姓名 :</span>
								<span v-text="item.studentName"></span>
							</p>
							<p>
								<span>类别 :</span>
								<span v-text="{0:'事假',1:'病假',2:'其他'}[item.type]"></span>
							</p>
							<p>
								<span> 时间 :</span>
								<span v-text="format(item.startTime)"></span>
								<span>至</span>
								<span v-text="format(item.endTime)"></span>
							</p>
							<p>
								<span>事由 :</span>
								<span v-text="item.reason"></span>
							</p>
							<p v-if="item.remark">
								<span>驳回原因 :</span>
								<span v-text="item.remark"></span>
							</p>
						</div>
					</a>
				</div>
			</div>

		</div>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				list: []
			},
			methods: {
				format: function (time) {
					if (!time) return '';
					return dayjs(time).format('YYYY-MM-DD HH:mm');
				},
				img: function (status) {
					var prefix = '/wechat/image/';
					if (status == 0) return prefix + 'leave_unread.svg';
					if (status == 1 || status == 2) return prefix + 'leave_read.svg';
				},
				style: function (status) {
					var color = ['yellow', 'green', 'red'][status];
					return {
						color: color,
						'border-color': color
					};
				}
			},
			created: function () {
				axios.get('/t/leave2').then(function (res) {
					this.list = res.data;
				}.bind(this));
			}
		});

	</script>

</body>

</html>